<html>
<title>组件的单向数据流</title>

<head>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="container">
        <my-hello></my-hello>
    </div>

    <template id="hello">
        <div>
            <input type="text" v-model="name" />
            <h3>父组件：{{ name }}</h3>
            <h3>父组件的userName：{{ user.userName }}</h3>
            <my-world :name.sync="name" :user="user"></my-world>
        </div>
    </template>

    <template id="world">
        <div>
            <input type="text" v-model="dt" />
            <h3>子组件1(dt)：{{ dt }}</h3>
            <h3>子组件2(myname)：{{ myname }}</h3>
            <h3>父组件传递的数据：{{ name }}</h3>
            <h3>父组件传递的userName：{{ user.userName }}</h3>
            <button @click="change">修改数据</button>
        </div>
    </template>

    <script>
        var vm = new Vue({
            components: {
                'my-hello': {
                    template: '#hello',
                    methods: {
                    },
                    data() {
                        return {
                            name: '沃尔玛',
                            ////方法一：子组件中新建变量接受父组件的变量，修改子组件不会影响父组件，且不报错。
                            dt: this.name,
                            user: {
                                id: 0,
                                userName: 'user的Name'
                            }
                        }
                    },
                    components: {
                        'my-world': {
                            template: '#world',
                            props: ["name","user"],
                            data() {
                                return {//方法一：子组件中新建变量接受父组件的变量，修改子组件不会影响父组件，且不报错。
                                    dt: this.name
                                }
                            },
                            methods: {
                                change() {
                                    //方式一的代码
                                    //this.dt = 'alice';
                                    //this.myname = 'alice';
                                    //方式二的代码
                                    //this.$emit('update:name', 'new alic') //方式二：使用.sync，同时触发一个update:name事件
                                    //方式三：使用对象封装属性，可以支持子对象修改父对象属性
                                    this.user.userName="新的user的Name"
                                }
                            },
                            computed: {
                                myname() {
                                    return this.name;
                                }
                            }
                        }

                    }


                }
            }
        }).$mount('.container');
    </script>

</body>

</html>